<!DOCTYPE html>
<html>
<head>
    <title>Colors</title>
    <link rel="stylesheet" href="../../../../codebase/webix.css" type="text/css" charset="utf-8">
    <script src="../../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="../../common/samples.css">
</head>
<body>

<div id="testA"></div>

<script type="text/javascript" charset="utf-8">

    webix.ready(function(){
        var bar1 = webix.Sparklines.getTemplate({type:"bar", color: "#5868bf"});
        var bar2 = webix.Sparklines.getTemplate({type:"bar", color: "#3ea4f5", negativeColor:"#da4400" });
        grida = webix.ui({
            container:"testA",
            view:"datatable",
            columns:[
                { id:"id", header:" ", width:50},
                { id:"name", header:"Name", width:160},
                { id:"income", header:"Average", template:function(obj){
                    var arr = obj.income;
                    var sum = 0;
                    for(var i =0; i< arr.length; i++)
                        sum +=  arr[i];
                    return sum?(sum/arr.length).toFixed(2):0;
                }, width:150},
                // sparklines
                { id:"income", header:"Custom color", template: webix.Sparklines.getTemplate({type:"area", color: "#5868bf"}), width:200},
                { id:"income", header:"Row color", template: function(obj,type,data,column,index){
                    var template =(index%2?bar1:bar2);
                    return  template.apply(this,arguments);
                }, width:200}
            ],
            autoheight:true,
            autowidth:true,
            data: [
                {id: 1, name: "Austria", income: [710, 780, -390, 660, 600] },
                {id: 2, name: "France", income: [810, 500, 780, 800, 940] },
                {id: 3, name: "Germany", income: [630, 800, 120, 490, 520] },
                {id: 4, name: "UK", income: [200, 640, 440, 870, 850] }
            ]
        });
    });
</script>
</body>
</html>
